<template>
  <div>
    <table>
      <caption>
        传统table布局实现
      </caption>

      <thead>
        <tr>
          <th id="colgroup_1">列标题 1</th>
          <th colspan="2" id="colgroup_2">跨列标题 2 - 3</th>
        </tr>

        <tr>
          <th id="col_1">列标题 1</th>
          <th id="col_2">列标题 2</th>
          <th id="col_3">列标题 3</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th id="row_1">行标题</th>
          <td headers="colgroup_2 col_2 row_1">2</td>
          <td headers="colgroup_2 col_3 row_1">3</td>
        </tr>

        <tr>
          <th rowspan="2" id="row_2">跨行标题</th>
          <td headers="colgroup_2 col_2 row_2">2</td>
          <td headers="colgroup_2 col_3 row_2">3</td>
        </tr>

        <tr>
          <td headers="colgroup_2 col_2 row_2">2</td>
          <td headers="colgroup_2 col_3 row_2">3</td>
        </tr>

        <tr>
          <td headers="colgroup_1 col_1">1</td>
          <td headers="colgroup_2 col_2">2</td>
          <td headers="colgroup_2 col_3">3</td>
        </tr>
        <tr>
          <td headers="colgroup_1 col_1">1</td>
          <td headers="colgroup_2 col_2">2</td>
          <td headers="colgroup_2 col_3">3</td>
        </tr>
      </tbody>
    </table>

    <div class="caption">flex布局实现表格</div>
    <div class="column">
      <div class="column-item">学号</div>
      <div class="column-item">姓名</div>
      <div class="column-item">班级</div>
    </div>
    <div class="row" v-for="item in items" :key="item.num">
      <div class="row-item">{{ item.num }}</div>
      <div class="row-item">{{ item.name }}</div>
      <div class="row-item">{{ item.classNum }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
  data() {
    return {
      items: [
        {
          num: 1,
          name: "小明",
          classNum: "五班",
        },
        {
          num: 2,
          name: "小明",
          classNum: "五班",
        },
        {
          num: 3,
          name: "小明",
          classNum: "五班",
        },
      ],
    };
  },
});
</script>

<style scoped>
table {
  width: 100%;
  line-height: 3rem;
  color: white;
  text-align: center;
}

caption {
  background-color: turquoise;
}

th,
td {
  background-color: pink;
}

th:nth-child(2),
td:nth-last-child(2) {
  background-color: skyblue;
}

.caption {
  padding: 10px 15px;
  background-color: turquoise;
  color: white;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid white;
  margin-top: 100px;
}

.column {
  background-color: skyblue;
  color: white;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 2px solid white;
}

.column-item {
  width: calc(100% / 3);
  padding: 10px 15px;
  border-right: 2px solid white;
}

.row {
  display: flex;
  background-color: pink;
  color: white;
  text-align: center;
  border-bottom: 2px solid white;
}

.row-item {
  width: calc(100% / 3);
  padding: 10px 15px;
  border-right: 2px solid white;
}
</style>
